<template>
  <view class="modify-container">
    <image class="logo" src="/static/njt.png"></image>
    <u--form ref="uForm" :model="model" :rules="rules" class="modify-form" labelPosition="left">
      <!-- 手机号码输入项 -->
      <u-form-item label="手机号码" labelWidth="auto" prop="mobilePhone">
        <u--input
            v-model="model.mobilePhone"
            :clearable="true"
            border="surround"
            placeholder="请输入手机号码"
            type="text"
        ></u--input>
      </u-form-item>

      <!-- 新密码输入项 -->
      <u-form-item label="输入新密码" labelWidth="auto" prop="newPassword">
        <u--input
            v-model="model.newPassword"
            :clearable="true"
            :show-password="showNewPassword"
            border="surround"
            placeholder="请输入新密码"
            type="password"
            @click-icon="showNewPassword = !showNewPassword"
        ></u--input>
      </u-form-item>

      <!-- 确认新密码输入项 -->
      <u-form-item label="确认新密码" labelWidth="auto" prop="confirmPassword">
        <u--input
            v-model="model.confirmPassword"
            :clearable="true"
            :show-password="showConfirmPassword"
            border="surround"
            placeholder="请再次输入新密码"
            type="password"
            @click-icon="showConfirmPassword = !showConfirmPassword"
        ></u--input>
      </u-form-item>

      <!-- 按钮组 -->
      <u-form-item>
        <u-button
            class="confirm-btn"
            text="确认修改"
            type="success"
            @click="submitForm"
        ></u-button>
        <u-button
            class="login-btn"
            text="返回登录"
            type="primary"
            @click="goToLogin"
        ></u-button>
      </u-form-item>
    </u--form>
  </view>
</template>

<script>
export default {
  data() {
    // 自定义密码验证函数，检查两次输入的密码是否一致
    const validateConfirmPassword = (rule, value, callback) => {
      if (value !== this.model.newPassword) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    };

    return {
      // 表单数据模型
      model: {
        mobilePhone: '',
        newPassword: '',
        confirmPassword: ''
      },
      // 表单验证规则
      rules: {
        mobilePhone: [
          {required: true, message: '请输入手机号码', trigger: ['blur', 'change']},
          {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码格式', trigger: ['blur', 'change']}
        ],
        newPassword: [
          {required: true, message: '请输入新密码', trigger: ['blur', 'change']},
          {min: 6, max: 20, message: '密码长度在6-20个字符之间', trigger: ['blur', 'change']}
        ],
        confirmPassword: [
          {required: true, message: '请确认新密码', trigger: ['blur', 'change']},
          {validator: validateConfirmPassword, trigger: ['blur', 'change']}
        ]
      },
      // 密码显示状态
      showNewPassword: false,
      showConfirmPassword: false,
      // 后端API基础地址
      baseUrl: 'http://localhost:8080'
    }
  },
  methods: {
    // 提交修改密码表单
    submitForm() {
      this.$refs.uForm.validate().then(res => {
        if (res) {
          uni.showLoading({
            title: '修改中...',
            mask: true
          });

          // 调用后端修改密码接口
          uni.request({
            url: `${this.baseUrl}/api/modifyPassword`,
            method: 'POST',
            data: {
              mobilePhone: this.model.mobilePhone,
              newPassword: this.model.newPassword
            },
            header: {
              'Content-Type': 'application/json'
            },
            success: (res) => {
              uni.hideLoading();

              if (res.statusCode === 200) {
                const result = res.data;
                if (result.code === 200) {
                  uni.$u.toast('密码修改成功');

                  // 修改成功后返回登录页
                  setTimeout(() => {
                    uni.navigateTo({
                      url: '/pages/njt/login'
                    });
                  }, 1500);
                } else {
                  uni.$u.toast(result.msg || '修改失败，请检查信息');
                }
              } else {
                uni.$u.toast('网络错误，无法连接服务器');
              }
            },
            fail: (err) => {
              uni.hideLoading();
              console.error('修改密码异常：', err);
              uni.$u.toast('系统异常，请稍后再试');
            }
          });
        }
      }).catch(err => {
        console.log('表单验证失败：', err);
      });
    },

    // 返回登录页面
    goToLogin() {
      uni.navigateTo({
        url: '/pages/njt/login'
      });
    }
  }
}
</script>

<style scoped>
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 100rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20rpx;
}

.modify-container {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.modify-form {
  width: 100%;
  max-width: 500rpx;
  background-color: #ffffff;
  padding: 50rpx 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  margin-top: 50rpx;
}

.confirm-btn, .login-btn {
  width: 45%;
  margin: 0 2.5%;
}
</style>
